<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
     <!-- 6s后自动跳转自百度
        <meta http-equiv="refresh" content="6;URL=http://www.baidu.com">
        -->
        <style type="text/css">

            .search { height: 40px ; width: 600px ; margin: 15px auto ; border: 1px solid #1e9fff ;  }

            .input { float: left ; width: 480px ; height: 40px ; background-color: #ffffff ;  }

            [name=wd] {
                width: 450px ;
                height: 20px ; /* 设置输入框的高度 */
                margin: 5px  10px; /* 设置输入框的位置  先上下  后左右*/
                border: none ; /* 去除边框 */
                outline : none ; /* 去除轮廓 */
                background-color: transparent ; /* 透明背景 */
            }

            .camera-container { float: left ; width: 20px ; height: 40px ; background-color: #ffffff ; }
            .camera {
                background-image: url("camera.png");
                height: 16px ;
                width: 18px ;
                margin: 12px 1px ;
            }

            /* 使用 :hover 为 .camera 元素设置鼠标悬浮后的样式 */
            .camera:hover {
                background-position: 0 -20px ;
            }

            .button { float: left ; width: 100px ; height: 40px  ; outline:none}

            [type=submie] {
                /* 参照 [name=wd] 样式自己写 */
            }

        </style>

    </head>
    <body>

        <!-- 使用 .search 充当容器 -->
        <div class="search">
            <!-- 使用 .input 充当搜索框  -->
            <div class="input">
                <input type="text" name="wd">
            </div>
            <!-- 使用 .camera 充当相机区域  -->
            <div class="camera-container">
                <div class="camera"></div>
            </div>
            <!-- 使用 .button 充当提交按钮 -->
            <div class="button">
                <input type="submit" value="百度一下" style="width: 100px;height: 40px;background: deepskyblue;font-size: 14px;color: white">
            </div>
        </div>

    </body>
</html>